<template>
    <div id="login" class="clearfix">
        <app-header></app-header>
        <div class="login_content">
            <div class="register gt">
            <div class="denglu">
                <div class="title">登录</div>
                <div class="form clearfix">
                <input type="text" placeholder="账号（请输入手机号码）" class="account" v-model="phone">
                <input type="password" placeholder="密码（请输入6~20位字符）" class="pwd" v-model="password">
                <div class="register_btn" v-on:click="login_btn">
                    登录
                </div>
                <div class="forget gt"><router-link to="/retrieve">忘记密码</router-link></div>
                </div>
            </div>
            <div class="toLogin clearfix">
                <span>已经有APIS账号了</span>
                <router-link to="/register" class="login_btn gt">注册</router-link>
            </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from './header'
import {login} from '../api/example.js'
export default {
  name: 'login',
  data(){
      return{
        img: "https://dev.apis.sh/PBX40wgC0/static/",
        phone:"",
        password:"",
      }
  },
  components:{
    'app-header':Header,
  },
  methods:{
        //登录按钮 
        login_btn:function(){
            var vm = this;
            login(vm.phone,vm.password).then(res => {
                if(res.data.code === 'success'){
                    console.log(res.data)
                    localStorage.newsId=res.data.data.account._id;
                    localStorage.newstoken=res.data.data.account.token;
                    localStorage.newsUsername=res.data.data.account.nickname;
                    localStorage.newsPhone = vm.phone;
                    localStorage.newAvatar = this.img + res.data.data.account.avatar;
                    
                    alert(res.data.code);
                    this.$router.push({
                        name: "articleList"
                    });
                }else{
                    alert(res.data.message)
                }
            })
        },
        // 判断是否登录
        judge:function(){
            if(localStorage.newstoken != 'undefined'){
                this.isShow=false
            }else{
                this.isShow=true
            }
        }
    },
  mounted(){
    this.judge();
  }
}
</script>

<style scoped>
    #login{
        width:100%;
    }
    .login_content{
        height:860px;
        background: url(../assets/bg_sign.png) no-repeat 100% 100%;
        background-size: 100% 100%;
    }
    .register{
        width:568px;
        background: rgba(255,255,255,0.24);
        box-shadow: 6px 6px 14px 5px rgba(39,52,101,0.08);
        margin-top: 107.8px;
        margin-right: 197.9px;
        padding-top: 44.2px;
    }
    .denglu{
        width:380px;
        margin:0 auto;
    }
    .denglu .title{
        font-size: 36px;
        color: #FFFFFF;
        text-align:center;
    }
    .form{
        margin-top: 35px;
    }
    .form input{
        width:380px;
        height:56px;
        line-height: 56px;
        font-size: 16px;
        color: #9B9B9B;
        border: 1px solid #FFFFFF;
        border-radius: 2px;
        padding-left: 20.2px;
        margin-bottom: 18px;
    }
    .QRcode_div input{
        width:228px;
    }
    .note input{
        width:174px;
    }
    .graphic,.verification,.checkCode{
        margin-left: 12.2px;
        width:90px;
        display: inline-block;
        height: 54.7px;
        line-height: 54.7px;
        text-align: center;
        cursor: pointer;
        background: #FF8000;
        font-size: 16px;
        color:#fff;
    }
    .graphic{
        width:139.8px;
        background: #f5f5f5;
        color:#FF8000;
    }
    .graphic svg{
        width:100%;
        height:100%;
        padding-left: 34px;
    }
    .register_btn{
        margin-top:24.3px;
        background: #FF8000;
        height:53px;
        line-height: 53px;
        text-align:center;
        font-size: 20px;
        color: #FFFFFF;
        cursor: pointer;
    }  
    .forget{
        font-size: 14px;
        color:#fff;
        margin:20px 0 39.7px;
    }
    .toLogin{
        border-top: 1px solid #fff;
        height:76.4px;
        line-height: 76.4px;
    }
    .toLogin span{
        margin-left: 19.7px;
        font-size: 14px;
        color:#fff;
    }
    .toLogin .login_btn{
        display: inline-block;
        height:41px;
        line-height: 41px;
        padding:0 13px;
        background: #fff;
        margin:18px 41px 0 0;
        font-size: 20px;
        color: #0D407E;
        cursor: pointer;
    }
</style>

